<template>
  <div class="imgIndetail">
    <index-login v-if="isNeedLogin" @complete="complete"></index-login>
    <div class="bannerDiv">
        <swiper autoplay="true" duration="1000" interval="3000" circular="circular">
           <block v-for="(item, index) in bannerIndetailList" :key="index">
              <swiper-item>
                <image :src="item" class="slide-image"/>
              </swiper-item>
            </block>
        </swiper>
      </div>
    <div class="productDiv" v-for="(item,index) in imgIndetailList" :key="index">
      <div class="imgDiv"><img :src="item"></div>
      <div class="shareBtn" @click="shareIndetail"><img src="/static/images/goods/sharebag.png">分享有礼</div>
    </div>
    <created-image v-if="showCreatedImg" :imgUrl="imgUrl" @cancel="cancel"></created-image>
  </div>
</template>
<script>
import indexLogin from '@/components/dialog/index-login' 
import createdImage from '@/components/indetail-bottom/created-image'
export default {
  components: {
    indexLogin,createdImage
  },
  data () {
    return {
      indetailId: 0,
      imgIndetailList: [],
      bannerIndetailList: [],
      showCreatedImg: false,//显示生成海报
      imgUrl:'',//海报的具体链接
      userCode: '',//用户的二维码
      isNeedLogin: false,//是否显示登录的组件
    }
  }, 
  onLoad(option){
    console.log(option)
    this.indetailId = option.aid
    if(option.photoWallId){
      this.isNeedLogin = true
      this.userCode = decodeURIComponent(option.photoWallId)//通过二维码进来获取的unionId
    }else{
      this.isNeedLogin = false
      this.userCode = ''
      this.getImgIndetail() //商品详情的展示
    } 
  },
  methods: {
    cancel(){
      this.showCreatedImg = false
    },
    complete(){
      this.getImgIndetail() //商品详情的展示
    },
    getImgIndetail(){
      this.$http.get(`products/photoDetail/${this.indetailId}?parentUnionId=${this.userCode}`).then((res)=>{ 
        wx.setStorageSync('parentId',this.userCode)
        this.bannerIndetailList = res.data.data.bannerImgUrls
        this.imgIndetailList = res.data.data.detailImgUrls
      })
    },
    shareIndetail(){
      let that = this
      wx.showActionSheet({
        itemList: ['生成海报'],
        success(res) {
          wx.showLoading({ //数据请求前loading，
            title: '生成中',
          })
          that.getImage()
        },
        fail(res) {
          console.log(res.errMsg)
        }
      })
    },
    getImage(){ //生成海报
      this.$http.get(`user/share/sharePhotoWall?photoWallId=${this.indetailId}`).then((data)=>{ 
        wx.hideLoading()
        if(data.data.code == 10){
          this.wxAlert(data.data.msg)
          this.showCreatedImg = false
        }else if(data.data.code == 0){
          this.imgUrl = data.data.data
          this.showCreatedImg = true
        }
      })  
    },
    wxAlert(txt){
      wx.showToast({
          title: txt,
          icon: "none",
          duration: 3000,
          mask: true
      })
    }
  },
}
</script>
<style scoped>
.imgIndetail .bannerDiv swiper{
  width: 100%;
  height: 580rpx;
}
.imgIndetail .bannerDiv swiper image{
  width: 100%;
  height: 100%;
}
.imgIndetail .productDiv{
  width: 100%;
  height: 560rpx;
  margin-top: 20rpx;
  position: relative;
}
.imgIndetail .productDiv .imgDiv{
  width: 100%;
  height: 560rpx;
}
.imgIndetail .productDiv img{
  width: 100%;
  height: 100%;
}
.imgIndetail .productDiv .shareBtn{
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 20rpx;
  font-size: 28rpx;
  color: #fff;
  width: 180rpx;
  height: 50rpx;
  background: #000;
  opacity: 0.7;
  border-radius: 25rpx 0rpx 0rpx 25rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.imgIndetail .productDiv .shareBtn img{
  display: block;
  width: 24rpx;
  height: 27rpx;
  margin-right: 10rpx;
}
</style>
